import { FC, useState, useEffect, useMemo } from 'react';
import { formatDate } from '@/utils';
import useWeather from '@/utils/useWeather';
import { useSelector } from 'umi';

const Index: FC = () => {
  const title = useSelector((state: any) => state.admin.title);

  // time表示的是时间戳
  const [time, set_time] = useState<number>(0);
  const temp = useWeather();

  // useEffect(() => {
  //   set_time(new Date().getTime());
  //   const timer = setInterval(() => {
  //     set_time(new Date().getTime());
  //   }, 1000);

  //   // 卸载定时器
  //   return () => {
  //     clearInterval(timer);
  //   };
  // }, []);

  useEffect(() => {
    set_time(new Date().getTime());
  }, []);
  useEffect(() => {
    setTimeout(() => {
      set_time(new Date().getTime());
    }, 1000);
  }, [time]);

  const timeStr = useMemo(() => {
    return formatDate(time);
  }, [time]);

  return (
    <nav className="nav">
      <div className="left">{title}</div>
      <div className="right">
        {temp}℃ - {timeStr}
      </div>
    </nav>
  );
};

export default Index;
